﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Drop-Down menu</title>
    <script type="text/javascript">
        function onMouseOver(str) {
            switch (str) {
                case "One": var show = document.getElementById("HiddenBlockOne");
                    show.style.display = 'block';
                    break;
                case "Two": var show = document.getElementById("HiddenBlockTwo");
                    show.style.display = 'block';
                    break;
                case "Three": var show = document.getElementById("HiddenBlockThree");
                    show.style.display = 'block';
                    break;
                default:
                    break;
            }
        }

        function onMouseOut(str) {
            switch (str) {
                case "One": var show = document.getElementById("HiddenBlockOne");
                    show.style.display = 'none';
                    break;
                case "Two": var show = document.getElementById("HiddenBlockTwo");
                    show.style.display = 'none';
                    break;
                case "Three": var show = document.getElementById("HiddenBlockThree");
                    show.style.display = 'none';
                    break;
                default:
                    break;
            }
        }
    </script>
	<style type="text/css">
		body, a {color:black;text-decoration:none;}
		a:hover {text-decoration:underline}
		div#menu {padding:40px}
		ul {padding:0px;list-style:none;}
		li {padding-left:20px; display:inline-block}
        .HiddenBlock{display:none}
	</style>
</head>
<body>
    <div>
        <ul>
            <li>
                <table  onmouseover="onMouseOver('One')" onmouseout="onMouseOut('One')" border="1">
                    <tr  id="menu_root">
                        <td>
                            Block One
                        </td>
                    </tr>
                    <tr>
                        <td id="HiddenBlockOne" class="HiddenBlock">
                            <ul>
                                <li><a href="http://www.google.com" title="printers">Google</a></li>
					            <li><a href="http://www.yahoo.com" title="scanners">Yahoo</a></li>
                            </ul>
                        </td>
                    </tr>
                </table>
            </li>
            <li>
                <table onmouseover="onMouseOver('Two')" onmouseout="onMouseOut('Two')" border="1">
                    <tr>
                        <td>
                            Block Two
                        </td>
                    </tr>
                    <tr>
                        <td id="HiddenBlockTwo" class="HiddenBlock">
                            <ul>
                                <li><a href="http://www.dir.bg" title="printers">Dir.bg</a></li>
					            <li><a href="http://www.btv.bg" title="scanners">BTV</a></li>
					            <li><a href="http://www.abv.bg" title="fax machines">АБВ</a></li>
                            </ul>
                        </td>
                    </tr>
                </table>
            </li>
            <li>
                <table onmouseover="onMouseOver('Three')" onmouseout="onMouseOut('Three')" border="1">
                    <tr>
                        <td>
                            Block Three
                        </td>
                    </tr>
                    <tr>
                        <td id="HiddenBlockThree" class="HiddenBlock">
                            <ul>
                                <li><a href="http://www.biskvitka.net" title="processors">Бисквитка</a></li>
					            <li><a href="http://www.blizzard.com" title="Mainboards">Blizzard</a></li>
                            </ul>
                        </td>
                    </tr>
                </table>
            </li>
        </ul>
    </div>
</body>
</html>
